<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-21 09:50:52
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-11 11:16:06
-->
<template>
  <div class="package-day-box">
    <a-form :model="formState" name="ticketDate" :label-col="{ style: { width: '100px' } }">
      <a-form-item label="使用时间" name="ticketDate">
        <!-- <a-input v-model:value="formState.ticketDate" /> -->
        <a-date-picker v-model:value="formState.ticketDate" @change="handleChange" />
      </a-form-item>
      <a-form-item label="库存" name="num">
        <a-input v-model:value="formState.num" />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-switch :checked="formState.status === 1" checked-children="开启" un-checked-children="关闭"
          @click="(checked) => switchClick(checked)" />
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { Dayjs } from 'dayjs';
const props = defineProps({
  formData: {
    type: Object,
    default(rawProps) {
      return rawProps;
    },
  },
});
const formState = reactive(props.formData);
const switchClick = (checked) => {
  formState.status = checked ? 1 : 0;
};
const handleChange = (val: [Dayjs, Dayjs]) => {
  console.log('🚀 ~ handleChange ~ val:', val)
};

defineExpose({
  formState,
});
</script>
<style lang="less" scoped>
.package-day-box {
  padding-top: 30px;
}
</style>
